<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Layout fijo</title>
 <link href="estilo.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script>
function toggle() { 
var ele = document.getElementById("toggleText");
if(ele.style.display == "block") {
		ele.style.display = "none";

	}
else {
	ele.style.display = "block";

}
}; 
var droid = new Android();
var fetch_data = function(option,data1,data2) { 
	
    if(option=="launch") option = document.getElementById('launch').value;
    if(data1!=null) option = option + "#" + data1;
    if(data2!=null) option = option + "#" + data2;

    
    console.log("option: " + option.substring(0, 5));
    
	var result= Android.doCmd(option);
	if(option.substring(0, 7) == "contact") {
		toggleDiv('myContent');	toggleDiv('botones');
	}

	

};

function get(name){
	   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
	      return decodeURIComponent(name[1]);
};

function carga() {
	
	$("#myContent").toggle();	
 	document.getElementById('desc').innerHTML = Android.get("desc") + " (" + Android.get("width") + ")";
 	document.getElementById('cabecera').innerHTML = "<img width='" + Android.get("width") + "' src='" + Android.get("logo") + "'>";
 	document.getElementById('textoContacto').innerHTML = "<TEXTAREA ID='comments' NAME='comments' COLS=30 ROWS=6>deje aquí su tlfn, mail o consulta para que le contactemos</TEXTAREA>";
 	//document.getElementById('botones').style="height: " + "100px";
 	
 	
// 	document.getElementById('cabecera').innerHTML = "<img src='" + Android.get("logo") + "'>";
};


</script>


<script type="text/javascript">
function toggleDiv(divId) {
   $("#"+divId).fadeToggle("slow");
}

function clearContents(element) {
	$("#comments").text("Hello world!");
// 	 $("#test1").text("Hello world!");
	//element.value = '';
	  //element.select();
// 	  $("#comments").fadeIn("slow");
	}

function go(divId) {
   alert(divId);
}
</script>

</head>

<body onload="carga()">
 

 
 <!-- Capa destinada al header -->
 <div id="cabecera">
<!--   <img src="http://www.elprimerodelalista.es/images/logo.png"></img> -->
 </div>
 
 <!-- Capa de contenidos, columnas, etc. -->
 <div id="principal">
<div id="desc" class="texto"></div>

 <div id="cuerpo">
<center> 
<div id="botones" style="float: center">
 <span class="columna">  <a href="javascript:fetch_data('llamada')" class="enlaceboton"><img  src="phone.png"></img></a></span> 
  <span class="columna"> <a href="javascript:fetch_data('mail')" class="enlaceboton"><img  src="email.png"></img></a></span> 
  <span class="columna"> <a href="javascript:fetch_data('mapa')" class="enlaceboton"><img  src="map.png"></img></a>    </span> 
   <span class="columna"> <a href="javascript:fetch_data('web')" class="enlaceboton"><img  src="web.png"></img></a>    </span> 
   <span class="columna"> <a href="javascript:toggleDiv('myContent');toggleDiv('botones');" class="enlaceboton"><img  src="contacto.png"></img></a>    </span> 
</div>
<div id="myContent" style="background: #B6B6B6; top: 0;  left: 50% ; right: 50%;  padding: 5px 10px; border: 2px">
<div id="textoContacto"><TEXTAREA onfocus="clearContents(this);" ID="comments" NAME="comments" COLS=30 ROWS=6>deje aquí su tlfn, mail, nombre y/o consulta</TEXTAREA></div> 
<!-- <input type="button" id="contacta" value="enviar" onclick=""/>  -->
 <span class="columna">  <a href="javascript:fetch_data('contact',document.getElementById('comments').value)" class="enlaceboton"><img width="64" height="64" src="accept.png"></img></a></span> 
  <span class="columna"> <a href="javascript:toggleDiv('myContent');toggleDiv('botones');" class="enlaceboton"><img width="48" height="48" src="cancel.png"></img></a></span> 

</div>
 </center>
 
 </div>
 </div>

 <!-- Capa para el pie de página -->
 <div id="pie">
		<p  class="footer"><b>&copy;tucanalmovil </b>más información <a href="javascript:fetch_data('tucanalmovil')">aquí</a></p>
 </div>
 

</body>
</html>
